<layout:basic/>

<component:application.module.admin.library.component.Datatable id="properties_list" title="配置列表" width="12">
    <button id="addmenu" class="btn btn-default"><i class="fa fa-plus"></i> 添加配置</button>
    <button id="ei" class="btn btn-primary"><i class="fa fa-save"></i> 立即生效</button>
    <button id="refreshmenu" class="btn btn-success"><i class="fa fa-refresh"></i> 刷新列表</button>
</component:application.module.admin.library.component.Datatable>

<div id="propertiesModal" style="display: none">
    <form class="form-horizontal" role="form" id="propertiesForm">
        <div class="form-group">
            <label class="col-sm-3 control-label">名称</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" name="name">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">值</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" name="value">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注</label>
            <div class="col-sm-5">
                <textarea class="form-control" name="note"></textarea>
            </div>
        </div>
    </form>
</div>
<script>
    $(function () {
        $("#ei").click(function () {
            $.get("__PUBLIC__/admin/property/effectImmediately", function (res) {
                return layer.msg(res.message);
            });
        });
        var page = (function () {
            return {
                selector: {
                    /** 选择器 */
                    modal: "#propertiesModal",
                    table: "#properties_list",
                    form: "#propertiesForm",
                    /** 事件触发器 */
                    trigger: {
                        /** 表格外部*/
                        add: "#addmenu",
                        refresh: "#refreshmenu",
                        /** 表格内部：元素直接相关 */
                        update: ".act-update",
                        remove: ".act-delete"
                    }
                },
                modalOptions: {
                    title: "添加角色"
                },
                tableOptions: [
                    {
                        title: 'ID',
                        data: 'id',
                        width: "5%"
                    },
                    {
                        title: '键',
                        data: 'name',
                        width: "25%"
                    },
                    {
                        title: '值',
                        data: 'value',
                        width: "25%"
                    },
                    {
                        title: '备注',
                        data: 'note',
                        width: "30%"
                    },
                    {
                        title: '操作',
                        data: function () {
                            return "<button class='btn btn-default btn-xs act-updatecomment'>修改备注</button> " +
                                " <button class='btn btn-danger btn-xs act-updatevalue'>修改值</button> ";
                        },
                        width: "15%"
                    }
                ],
                url: {
                    /** 增删改查URL地址 */
                    refresh: "__PUBLIC__/admin/property/getlist",
                    add: "__PUBLIC__/admin/property/add"
                },
                onclick: {
                    ".act-updatecomment": function (ele, dtables) {
                        var row = ele.closest("tr");
                        var data = dtables.data(row);
                        console.log(ele, data);
                        return layer.prompt({
                            title: '修改配置项备注',
                            formType: 2,
                            value: data.note
                        }, function (text, index) {
                            $.get("__PUBLIC__/admin/property/updatecomment", {
                                id: data.id,
                                note: encodeURI(text)
                            }, function (res) {
                                if (res.status) {
                                    dtables.update(res.data, row);
                                    layer.close(index);
                                } else {
                                    return layer.msg(res.message);
                                }
                            });
                        });

                    },
                    ".act-updatevalue": function (ele, dtables) {
                        var row = ele.closest("tr");
                        var data = dtables.data(row);
                        console.log(ele, data);
                        return layer.prompt({title: '修改配置值', formType: 0, value: data.value}, function (text, index) {
                            $.get("__PUBLIC__/admin/property/updatevalue", {
                                id: data.id,
                                value: encodeURI(text)
                            }, function (res) {
                                if (res.status) {
                                    dtables.update(res.data, row);
                                    layer.close(index);
                                } else {
                                    return layer.msg(res.message);
                                }
                            });
                        });
                    }
                }
            };
        })();
        isea.bundle.init("table", page);
    });
</script>
